<template>
	<view class="navigation">
		<block v-if="!custom">
			<view class="navigation-bar" :style="{height:statusBarHeight + 'px', background:bgColor}"></view>
			<view class="navigation-box" :style="{background:bgColor}">
				<view class="navigation-left">
					<view class="navigation-img" @click="navBack()">
						<image src="/static/img/t1.png" />
					</view>
					<view class="navigation-img" @click="navHome()">
						<image src="/static/img/t2.png" />
					</view>
				</view>
				<view :style="{color:fontColor, fontSize:fontSize+'px', fontWeight:'bold'}">{{title}}</view>
			</view>
		</block>	
		<block v-else>
			<view class="navigation-bar" :style="{height:statusBarHeight + 'px', background:'none'}"></view>
			<view class="navigation-box" :style="{background:'none'}">
				<view class="navigation-left" :style="{background:bgColor,opacity:'0.75'}">
					<view class="navigation-img" @click="navBack()">
						<image src="/static/img/t1.png" />
					</view>
					<view class="navigation-img" @click="navHome()">
						<image src="/static/img/t2.png" />
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			custom:{
				type:Boolean,
				default(){
					return false;
				}
			},
			title: {
				type: String,
				default () {
					return '';
				}
			},
			bgColor :{
				type: String,
				default () {
					return '#fff';
				}
			},
			fontColor :{
				type: String,
				default () {
					return '#000';
				}
			},
		},
		data() {
			return {
				statusBarHeight:'',
				fontSize:getApp().globalData.navigationFontSize - 1,
			}
		},
		created() {
			this.info();
		},
		methods: {
			info(){
				var _this = this;
				uni.getSystemInfo({
					success: function (res) {
						_this.statusBarHeight = res.statusBarHeight;
						console.log(res);
					}
				});
			},
			navBack(){
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				
				if(!prevPage){
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}else{
					this.$com.navBack();
				}
			},
			navHome(){
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
.navigation{position: fixed;z-index: 11;top: 0;left: 0;width: 100%;}
.navigation-bar{background-color: #fff;}
.navigation-box{height: 88rpx;background-color: #fff;font-size: 28rpx;color: #000;position: relative;display: flex;align-items: center;justify-content: center;width: 100%;}
.navigation-left{width: 170rpx;height: 60rpx;position: absolute;left:16rpx;display: flex;align-items: center;border-radius: 100rpx;border: 2rpx solid #f8f8f8;}
.navigation-img{width: 85rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;padding: 10rpx 0;}
.navigation-img:nth-of-type(1){border-right: 2rpx solid #eee;}
.navigation-img:nth-of-type(1) image{width: 30rpx;height: 30rpx;}
.navigation-img:nth-of-type(2) image{width: 40rpx;height: 40rpx;}
</style>
